<template>
	<view class="">
		<view class="circleFriends">
			<view class="row">
				<image src="/static/images/common/fenxiang-red.png" mode=""></image>
				<button open-type="share">分享好友</button>
			</view>
			<view class="row">
				<image src="/static/images/common/xiaoguo.png" mode=""></image>
				<button >使用效果</button>
			</view>
			<view class="row">
				<image src="/static/images/common/jilu.png" mode=""></image>
				<button >转换记录</button>
			</view>
		</view>
		<view>
			<textarea v-model="textValue" placeholder="请输入或粘贴您需要防折叠的文案~~~" placeholder-style="color:#b1b2b3;" maxlength="-1"/>
		</view> 
		<view class="circleFriends">
			<view class="row">
				<button class="button1" @click="toClear">清空</button>
			</view>
			<view class="row">
				<button class="button1"  @click="open">一键优化文案</button>
				<uni-popup ref="popup">
					<view class="popup-content">
						<text class="popup-text">文案已复制，快去发圈试试吧！</text>
						<button class="popup-button" @click="close()">知道了</button>
					</view>
				</uni-popup>
			</view>
		</view>
		<view class="richText">
			<rich-text :nodes="defultText"></rich-text>
		</view>
	</view>
</template>

<script>
export default {
	data() {
		return {
			defultText:
				'<h3>使用必看：</h3> <p>1、将文案粘贴在上面的文本框中，点击一键优化文案，转换成功后会自动复制，回到微信朋友圈长按粘贴，发布成功之后下拉刷新朋友圈，如果显示异常可以尝试重新转换。</p><p>2、转换一次只可粘贴发表一次;多次粘贴发表需要进行多次转换，否则仍有被折叠的风险。</p><p>3、含有较多的表情符号、空格回车等非中文字时可能会转换失败，建议重新修改文案。</p> ',
			textValue: '',
			showPopup: false
		};
	},
	created() {
		//设置分享到微信分享到朋友圈
		wx.showShareMenu({
			withShareTicket: true,
			menus: ['shareAppMessage', 'shareTimeline', 'addToFavorites']
		});
	},
	methods: {
		open() {
			this.formatTextForWechat(this.textValue);

			// 通过组件定义的ref调用uni-popup方法 ,如果传入参数 ，type 属性将失效 ，仅支持 ['top','left','bottom','right','center']
			//this.$refs.popup.open('center');   不调用自己写的弹窗使用系统默认的
		},
		close() {
			this.$refs.popup.close();
		},
		toShare() {
			wx.showActionSheet({
				itemList: ['分享到朋友圈', '分享给朋友'],
				success: function (res) {
					if (res.tapIndex === 0) {
						// 分享到朋友圈
						wx.updateShareMenu({
							withShareTicket: true,
							menus: ['shareAppMessage', 'shareTimeline']
						});
					} else if (res.tapIndex === 1) {
						// 分享给朋友
						wx.shareFileMessage();
					}
				}
			});
		},
		toClear() {
			this.textValue = '';
		},
		formatTextForWechat(text) {
			//格式化文本内容
			let result = [];
			let currentPart = '';
			for (let i = 0; i < text.length; i++) {
				const char = text.charAt(i);
				//if (/[.,;:?!。，；：？！]/.test(char)) {
				if (/[。，；：？！]/.test(char)) {
					if (currentPart) {
						result.push(currentPart + char);
					} else {
						result.push(char);
					}
					currentPart = '';
				} else {
					currentPart += char;
				}
			}
			if (currentPart) {
				result.push(currentPart);
			}

			// // 按一定字数进行分段，这里设定每80个字为一段（可按需调整）
			// const segmentLength = 40;
			// const segments = [];
			// for (let i = 0; i < optimizedText.length; i += segmentLength) {
			// 	segments.push(optimizedText.substring(i, i + segmentLength));
			// }

			// 对每段文字添加适当空格，每隔20个字符添加一个空格（可按需改变间隔字数）
			const spacedSegments = result.map((segment) => {
				let spacedSegment = '';
				for (let j = 0; j < segment.length; j++) {
					if (j % 20 === 0 && j !== 0) {
						spacedSegment += ' ';
					}
					spacedSegment += segment.charAt(j);
				}
				return spacedSegment;
			});

			// 每段之间添加换行符，让文本呈现分段效果
			const formattedText = spacedSegments.join('\n');
			// 示例用法
			uni.setClipboardData({
				data: formattedText,
				showToast: false,
				success: () => {
					uni.showToast({
						title: '文案已复制！',
						icon: 'success',
						duration: 2000
					});
				},
			});
			this.textValue = formattedText;
		}
	}
};
</script>

<style lang="stylus">
.circleFriends
	display: flex
	border-color:#0052d9
	color: #0052d9
	margin-top: 80rpx;
	margin-bottom: 18rpx;
	.row
		flex: 1
		text-align: center
		image
			height: 90rpx
			width: 90rpx
			vertical-align: middle
			border: 1
		.text
			font-size: 28rpx
			font-weight: bold
		button
			color: #fff
			height: 80rpx
			font-size: 28rpx
			margin-left: 20rpx
			margin-right: 20rpx
			vertical-align: middle
			background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
			font-weight: bold
			box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0,0,0,.3);
		.button1
			background-image: linear-gradient(45deg,#5871ff,#63a7ff);
			box-shadow: 2rpx 4rpx 8rpx 2rpx rgba(0,0,0,.3);
			font-weight: bold
		.popup-content
			height: 200rpx
			width: 500rpx
			padding: 20rpx
			background-color: #fff
			border-radius: 10rpx
			.popup-text
				font-size: 28rpx
				font-weight: bold
			.popup-button
				margin-top: 50rpx

textarea
	margin-left: 20rpx
	margin-right: 20rpx
	margin-top: 50rpx
	width: 710rpx
	border: 2rpx solid #0052d9
.richText
	margin-top: 50rpx
	color: #ffffff;
	padding: 20rpx;
	line-height: 1.5;
	background-image: linear-gradient(45deg,#ff4b87,#ff8c8c);
</style>
